<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
      
         <router-link to="/user/1001/username/zhangsan">跳转到组件a</router-link>
         <router-link to="/b">跳转到组件b</router-link>
            <!-- 视口 -->
         <router-view style="font-size: 20px;"></router-view>

    </div>
    <script>
        // 定义组件
        let comA={
            // 视图
            template:`
            <div>我是组件A，我的id值是{{id}}，我的用户名是{{username}}</div>
            `,
            // 视图模型
            data(){
                return{
                    id:3,
                    username:null
                }
            },
            created() {
                console.log(this.$route.params);
                this.id= this.$route.params.id;
                this.username=this.$route.params.username
                
            },
            // 模型
            // 组件内部的跳转
            // 进入守卫
            beforeRouteEnter (to, from, next) {
                // ...to 即将进入
                // from 从什么地方离开
                // next 是否允许他通行
                console.log('进入组件');
                console.log(to);
                console.log(from);

                
                next();//手动放行
            },

            // 离开守卫
            beforeRouteLeave (to, from, next) {
                // ...
                console.log('离开组件');
                next();

            }

        }
        let comB={
            // 视图
            template:`
            <div>我是组件b，我的id值是{{id}}</div>
            `,
            // 视图模型
            data(){
                return{
                    id:2
                }
            }
            // 模型

        }
        // 配置相关组件路由
        let router = new VueRouter({
            routes:[
                // # 表示是一个哈希路由
                // /历史状态路由
                {path:'/user/:id/username/:username',component:comA},
                {path:'/b',component:comB},

            ]
        })
        // 全局守卫
        // 前置守卫
        router.beforeEach((to, from, next) => {
            // to and from are both route objects. must call `next`.
            console.log('前置守卫',to,from);
            next();
        })

        // 后置守卫
        router.afterEach((to, from) => {
            // to and from are both route objects.
            console.log('后置守卫',to,from);
            
        })
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 声明路由对象
            router
        })
    </script>
</body>

</html>